{include file='common/head'}
    {include file='common/footer'}
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<blockquote class="layui-elem-quote layui-text">
  <div class="demoTable layui-form">
    <!--<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>-->
    <div class="demoTable layui-form">
      <div class="layui-input-inline">
        <input type="text" placeholder="请输入产品名称" name="name" lay-verify="required|phone"  autocomplete="off" class="layui-input">
      </div>
      <div class="layui-input-inline">
        <select name="category"  lay-search>
          <option value="">筛选产品类型</option>
          {foreach $cate as $c}
          <option value="{$c.id}">{$c.cate_name}</option>
          {/foreach}
        </select>
      </div>
      <button class="layui-btn " data-type="reload" ><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </div>
</blockquote>
<div class="demoTable layui-for">
  <table class="layui-table" lay-data="{height: 'full-100', url:'{:url('Test/pagedata')}',edit:true, page:true, id:'testReload',loading:true}" lay-filter="demo">
    <thead>
    <tr>
      <th lay-data="{field:'id',width:340,fixed: true,templet:'#apiid',sort:true}">产品编号</th>
      <th lay-data="{field:'api_name',width:340,fixed: true,templet:'#name'}">产品名称</th>
      <th lay-data="{field:'solo_price',sort:true,width:340,templet:'#price'}">接口价钱</th>
      <th lay-data="{width:340,fixed: 'right', align:'left', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
  </table>
  <script type="text/html" id="barDemo">
    <a id="collect" title="收藏产品" lay-event="collect" href="#"><i class="layui-icon" style="font-size: 25px; color:#029587;line-height: 30px">&#xe600;</i></a>&nbsp;&nbsp;&nbsp;
    <a title="添加我的数据列表" id="addapi" lay-event="addapi" href="#"><i class="layui-icon" style="font-size: 25px; color:#029587;line-height: 30px">&#xe654;</i></a>&nbsp;&nbsp;&nbsp;
  </script>
</div>
<script src="/static/admin/jquery.js"></script>
<script type="text/javascript" src="/static/index/layer/layer.js"></script>
<script type="text/html" id="apiid">
  <span>{{d.api_id}}</span>
</script>
<script type="text/html" id="name">
  <span>{{d.api_name}}</span>
</script>
<script type="text/html" id="price">
  <span>{{d.solo_price}}</span>
</script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table
            ,form = layui.form;
        var $ = layui.$, active = {
            reload: function(){
                var name = $('input[name="name"]').val();
                var category = $('select[name="category"] option:checked').val();
                //执行重载
                table.reload('testReload', {
                    where: {
                        name:name,
                        category:category,
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'collect'){
                $.ajax({
                    url: '{:url("Platformapi/apiCollect")}',
                    dataType: 'json',
                    type: 'post',
                    // async:false,
                    data: {'api_id':data.api_id},
                    success: function (val){
                        // console.log(data)
                        layer.msg(val.msg);
                    }
                });
            }else if(obj.event === 'addapi'){
                    $.ajax({
                        url: '{:url("Personalcenter/addUserApiList")}',
                        dataType: 'json',
                        type: 'post',
                        // async:false,
                        data: {'api_id':data.api_id,'quit_add':1},
                        success: function (data){
                            layer.msg(data.msg);
                        }
                    });
            }
        });
    });
</script>



</body>
</html>